{{ define "api.html" }}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API文档 - 数据便签</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/images/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/images/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/images/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-57-precomposed.png">
    <style>
        .api-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .api-section {
            margin-bottom: 30px;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .api-method {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 3px;
            font-weight: bold;
            margin-right: 10px;
        }
        .get { background-color: #e6f7ff; color: #1890ff; }
        .post { background-color: #f6ffed; color: #52c41a; }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
        code {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>数据便签 API 文档</h1>
        
        <div class="api-container">
            <div class="api-section">
                <h2>基础信息</h2>
                <p>所有API请求都需要包含<code>id</code>参数，指定要操作的标签ID。</p>
                <p>API基础URL: <code>{{ .BaseURL }}</code></p>
            </div>

            <div class="api-section">
                <h2>1. 创建标签</h2>
                <p><span class="api-method post">POST</span> <code>/create-tag</code></p>
                <p>创建一个新的数据标签</p>
                
                <h3>请求示例</h3>
                <pre>{
    "title": "我的标签名称"
}</pre>

                <h3>成功响应</h3>
                <pre>{
    "status": "success",
    "id": "生成的标签ID"
}</pre>
            </div>

            <div class="api-section">
                <h2>2. 添加记录</h2>
                <p><span class="api-method post">POST</span> <code>/add?id=标签ID</code></p>
                
                <h3>请求示例</h3>
                <pre>{
    "item_id": "项目ID",
    "label": "标签内容"
}</pre>
            </div>

            <div class="api-section">
                <h2>3. 删除记录</h2>
                <p><span class="api-method post">POST</span> <code>/delete?id=标签ID</code></p>
                
                <h3>请求示例</h3>
                <pre>{
    "record_id": 要删除的记录ID
}</pre>
            </div>

            <div class="api-section">
                <h2>4. 更新记录</h2>
                <p><span class="api-method post">POST</span> <code>/update?id=标签ID</code></p>
                
                <h3>请求示例</h3>
                <pre>{
    "record_id": 要更新的记录ID,
    "item_id": "新的项目ID",
    "label": "新的标签内容"
}</pre>
            </div>

            <div class="api-section">
                <h2>5. 获取/设置标题</h2>
                <p><span class="api-method get">GET</span> <code>/get-title?id=标签ID</code></p>
                <p><span class="api-method post">POST</span> <code>/update-title</code></p>
                
                <h3>设置标题请求示例</h3>
                <pre>{
    "id": "标签ID",
    "title": "新的标题"
}</pre>
            </div>

            <div class="api-section">
                <h2>6. 删除标签</h2>
                <p><span class="api-method post">POST</span> <code>/delete-tag</code></p>
                
                <h3>请求示例</h3>
                <pre>{
    "id": "要删除的标签ID"
}</pre>
            </div>

            <div class="api-section">
                <h2>7. 导入/导出</h2>
                <p><span class="api-method get">GET</span> <code>/export?id=标签ID</code> (返回文本文件)</p>
                <p><span class="api-method post">POST</span> <code>/import?id=标签ID</code></p>
                
                <h3>导入请求示例</h3>
                <pre>{
    "content": "导出的文本内容"
}</pre>
            </div>
          
            <div class="api-section">
                <h2>8. 修改单条记录</h2>
                <p><span class="api-method put">PUT</span> <code>/update-record?id=标签ID</code></p>
                
                <h3>请求示例</h3>
                <pre>{
    "record_id": 要修改的记录ID,
    "item_id": "新的项目ID",
    "label": "新的标签内容"
}</pre>
            
                <h3>成功响应</h3>
                <pre>{
    "status": "success",
    "message": "记录更新成功",
    "record": {
        "id": 记录ID,
        "item_id": "项目ID",
        "label": "标签内容"
    }
}</pre>
            </div>
            
            <div class="api-section">
                <h2>9. 获取/设置记录字段</h2>
                <p><span class="api-method get">GET</span> <code>/gset?id=标签ID&index=记录ID[&name=项目ID][&value=标签内容]</code></p>
                
                <h3>参数说明</h3>
                <ul>
                    <li><strong>id</strong>: 必填，标签ID</li>
                    <li><strong>index</strong>: 必填，记录ID</li>
                    <li><strong>name</strong>: 可选，要设置的项目ID</li>
                    <li><strong>value</strong>: 可选，要设置的标签内容</li>
                </ul>
            
                <h3>获取记录详情 (GET)</h3>
                <pre>GET /gset?id=G5nP9g&index=2</pre>
                <p>响应示例：</p>
                <pre>{
    "status": "success",
    "record": {
        "id": 2,
        "project": "项目ID",
        "content": "标签内容"
    }
}</pre>
            
                <h3>设置记录字段 (GET)</h3>
                <pre>GET /gset?id=G5nP9g&index=2&name=新项目ID&value=新标签内容</pre>
                <p>响应示例：</p>
                <pre>{
    "status": "success",
    "record": {
        "id": 2,
        "project": "新项目ID",
        "content": "新标签内容"
    }
}</pre>
            </div>
            
            <div class="api-section">
                <h2>10. 键值存储 (Key-Value Store)</h2>
                <p><span class="api-method get">GET</span> <code>/maps?name=键名[&value=键值]</code></p>
                <p>简单的键值存储接口，可用于存储和检索任意字符串数据</p>
                
                <h3>参数说明</h3>
                <ul>
                    <li><strong>name</strong>: 必填，要操作的数据键名</li>
                    <li><strong>value</strong>: 可选，要设置的键值（不提供时为查询操作）</li>
                </ul>
            
                <h3>获取键值 (GET)</h3>
                <pre>GET /maps?name=my_setting</pre>
                <p>响应示例（存在时）：</p>
                <pre>{
    "status": "success",
    "name": "my_setting",
    "value": "存储的值内容"
}</pre>
                <p>响应示例（不存在时）：</p>
                <pre>{
    "error": "键不存在"
}</pre>
            
                <h3>设置键值 (GET)</h3>
                <pre>GET /maps?name=my_setting&value=new_value</pre>
                <p>成功响应：</p>
                <pre>{
    "status": "success",
    "message": "键值已更新"
}</pre>
            </div>
        </div>
        
    </div>
    
</body>
</html>
{{ end }}